<template>
  <div class="w-card" :class="classes" :style="styles">
    <div
      class="w-card__title"
      v-if="$slots.title"
      :class="{
        'w-card__title--has-toolbar': titleHasToolbar,
        [titleClass]: titleClass || false
      }"
    >
      <slot name="title"></slot>
    </div>
    <div
      class="w-card__title"
      v-else-if="title"
      :class="titleClass || false"
      v-html="title"
    ></div>
    <w-image class="w-card__image" v-if="image" :src="image" v-bind="imgProps">
      <slot name="image-content"></slot>
    </w-image>
    <div class="w-card__content" :class="contentClass || false">
      <slot></slot>
    </div>
    <div
      class="w-card__actions"
      v-if="$slots.actions"
      :class="{ 'w-card__actions--has-toolbar': actionsHasToolbar }"
    >
      <slot name="actions"></slot>
    </div>
  </div>
</template>

<script>
import { computed } from "vue";
export default {
  name: "w-card",

  props: {
    color: { type: String },
    bgColor: { type: String },
    shadow: { type: Boolean },
    noBorder: { type: Boolean },
    tile: { type: Boolean },
    title: { type: String },
    image: { type: String },
    imageProps: { type: Object },
    titleClass: { type: String },
    contentClass: { type: String }
  },

  emits: [],
  setup(props, { slots }) {
    const titleHasToolbar = computed(() => {
      const { title } = slots;
      return (
        title &&
        title()
          .map(vnode => vnode.type.name)
          .join("")
          .includes("w-toolbar")
      );
    });
    const actionsHasToolbar = computed(() => {
      const { actions } = slots;
      return (
        actions &&
        actions()
          .map(vnode => vnode.type.name)
          .join("")
          .includes("w-toolbar")
      );
    });
    const imgProps = computed(() => {
      return {
        tag: "div",
        ratio: 1 / 2,
        ...props.imageProps
      };
    });
    const classes = computed(() => {
      return {
        [props.color]: props.color,
        [`${props.bgColor}--bg`]: props.bgColor,
        "w-card--no-border": props.noBorder,
        "w-card--tile": props.tile,
        "w-card--shadow": props.shadow
      };
    });
    const styles = computed(() => {
      return false;
    });
    return {
      titleHasToolbar,
      actionsHasToolbar,
      imgProps,
      classes,
      styles
    };
  }

};
</script>
